<template>
    <div class="payment">
       <div class="box">
            <el-row class="box-content">
                <el-col :sm="12" :lg="6">
                    <el-result
                        icon="success"
                        title="支付完成"
                        sub-title="Please follow the instructions">
                        <template #extra>
                            <el-button type="primary" @click="confirm()">确认</el-button>
                        </template>
                    </el-result>
                </el-col>
            </el-row>
       </div>
    </div>
</template>

<script setup>
import { inject } from 'vue';
const confirm = inject('confirm');
</script>

<style scoped>
.payment{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100vh;
    padding: 20px 0px;
    background-color: #ccc;
    z-index: 10000;
    display: flex;
    justify-content: center;
    place-items: center;
}
.box{
    width: 600px;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 15pt;
    box-shadow: 0 0 4px white;
    background-color: white;
    text-align: center;
}
.box-content{
    display: flex;
    justify-content: center;
    place-items: center;
    /* margin-left: 20%; */
    /* border: 2px solid ; */
}
.el-result{
    min-width: 250px;
    margin-left: -30%;
    /* border: 2px solid ;  */
}
</style>